<template>
  <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <ul>
      <li v-for="movie in movieList" :key="movie.id" class="list-item">
        <div class="movie" @click="gotoMovieDetail(movie.id)">
          <img :src="movie.img" :alt="movie.nm" class="movie-thumb" />
          <div class="movie-info">
            <div class="title">
              <h3>{{ movie.nm }}<span class="version" :class="movieVersion(movie.version)"></span></h3>

            </div>
            <div class="rank">
              观众评 <span>{{ movie.sc }}</span>
            </div>
            <div class="actors">{{ movie.star }}</div>
            <div class="arrangement">{{ movie.showInfo }}</div>
          </div>
        </div>
        <van-button class="buy" :color="movie.showStateButton.color" block round size="small"
          v-if="movie.showStateButton" :text="movie.showStateButton.content"
          @click="gotoButTicket(movie.id)"></van-button>
      </li>
    </ul>
  </van-list>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { fetchHotMovies, fetchMoreHotMovies } from '@/api/index.js'

import { useStore } from '@/stores'
const store = useStore()

import { useRouter } from 'vue-router'
const router = useRouter()


const loading = ref(false)
const finished = ref(false)

const movieList = ref([]) //当前热映电影
const movieIds = ref([]) //全部热映电影ID

const remainingMovieIds = computed(() => {
  return movieIds.value.slice(movieList.value.length)
})

const total = ref(0) //全部热映电影数量

const desc = computed(() => {
  return '观众评分：' + movie.sc
})


//电影版本
const movieVersion = (version) => {
  if (version === 'v2d') {

    return 'v2d'
  } else if (version === 'v2d imax') {

    return 'v2dimax'
  } else if (version == 'v3d') {
    return 'v3d'
  }
  else if (version == 'v3d imax') {
    return 'v3dimax'
  }
  else {
    return ''
  }

}

const gotoMovieDetail = (movieId) => {
  // console.log("电影ID", movieId);
  router.push({ path: `/movie/${movieId}` })
};

const gotoButTicket = (movieId) => {
  router.push({ path: `/cinema/movie/${movieId}` })
}



onMounted(async () => {
  // console.log('HotFilmListCmp mounted')

  loading.value = true

  const res = await fetchHotMovies(store.currentCity.id)
  movieList.value = res?.movieList //加载当前热映

  movieIds.value = res?.movieIds //全部热映电影ID
  total.value = res?.total //全部热映电影数量
  // 数据存入pinia
  store.setMovieList(res.movieList)
  store.setMovieIds(res.movieIds)
  store.setTotal(res.total)
  loading.value = false

  if (movieList.value.length >= total.value) {
    finished.value = true
    // showToast({ message: '没有更多了' })
  }
})

const onLoad = async () => {
  loading.value = true
  // 加载更多热映电影

  const res = await fetchMoreHotMovies(remainingMovieIds.value.splice(0, 10).join(','))
  movieList.value.push(...res.coming)
  store.setMovieList(movieList.value)

  loading.value = false

  if (movieList.value.length >= total.value) {
    finished.value = true
    // showToast({ message: '没有更多了' })
  }
};
</script>

<style scoped>
.list {
  background-color: #fff;
  margin-top: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.movie {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-thumb {
  width: 64px;
  height: 90px;
  margin-right: 10px;
}

.movie-info {
  width: 200px;
  font-size: 13px;
  color: #777;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  align-items: flex-start;
  justify-content: center;
  text-overflow: ellipsis;
}

.movie-info .title {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .title h3 {
  font-size: 17px;
  color: #333;
  margin: 0 0 5px 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.rank span {
  color: #faaf00;
  font-size: 15px;
  font-weight: 700;
}



.movie-info .actors,
.movie-info .arrangement {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-top: 5px;
}

.buy {
  font-size: 13px;
  width: 60px;
  height: 32px;
  line-height: 32px;
}


.version {
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 14px;
  line-height: normal;
  display: inline-block;
  margin-left: 5px;
}


.version.v2d {
  background-image: url("@/assets/version/v2d.png");
}

.version.v2dimax {
  background-image: url("@/assets/version/v2dimax.png");
}

.version.v3d {

  background-image: url("@/assets/version/v3d.png");
}


.version.v3dimax {
  background-image: url("@/assets/version/v3dimax.png");
}
</style>
